<template>
	<view class="total-analysis-container">
		<view class="state">
			<view class="title">
				<view class="left-title">排放占比</view>

				<view class="btn">
				
					<picker @change="datePickerChange" :value="yearIndex" :range="yearRange" range-key="">
						<view class="uni-input">{{yearRange[yearIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="middle">
				<view class="charts">
					<Echarts :echartOption="option" />
				</view>
				<view class="total">
					<view class="txt">总碳排放量(tCo2)</view>
					<view class="num">{{total}}</view>
				</view>
				<view class="state-list">
					<!-- 待接受 -->
					<view class="state-child" v-for="item in list" :key="item.id">
						<view class="left-title">
							<view class="iconfont icon-24gf-square" :style="{backgroundColor: item.color}"></view>
							<text class="txt">{{item.parenttype}}</text>
						</view>

						<text class="num">{{ item.ysl || 0}}</text>
					</view>

				</view>

			</view>
		</view>

		<!-- <view>
			<Echarts :echartOption="option" />
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import Echarts from "@/components/echarts/echarts.vue";
	import {

		reqConsumeCostStatistics
	} from "@/api/model/parkTotal.js"
	import {
		reqCarbonProportion
	} from "@/api/model/carbonPlatform.js"
	defineOptions({
		name: "TotalPriceStatistics"
	})
	const current = ref(1)
	const listOption = ref(['上月', '当年'])
	const list = ref([])
	const energyConsumptionOptions = ref([])
	const dateNow = ref(null)
	const activeIndex = ref(11)
	const yearIndex = ref(0)

	const total = ref(0)
	const option = {
		tooltip: {
			trigger: 'item'
		},
		grid: {
			top: '0',
			bottom: '30'
		},
		series: [{
			type: 'pie',
			radius: ['35%', '50%'],
			color: ['#FFC749', '#F38A64', '#5CD5E5', '#44B1F5', '#6BDFA0', '#EE7B8E', '#867DFF'],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'center'
			},
			labelLine: {
				show: false
			},
			data: [23, 89, 12, 41, 67, 58, 39],
		}]
	}

	const change = (index) => {
		current.value = index;
		getStatisticsOfTotalPrice(current.value)
	}
	//日期选中
	const datePickerChange = (e) => {
		yearIndex.value = e.detail.value
		let year = yearRange.value[yearIndex.value]
		getStatisticsOfTotalPrice(year)
	}


	//获取总价统计
	const getStatisticsOfTotalPrice = async (val) => {
		try {
			let res = await reqCarbonProportion(val);
			const responseData = res?.data?.data.ranking;

			if (!responseData || !Array.isArray(responseData)) return;

			list.value = responseData
			total.value = res?.data?.data.total

		} catch (error) {
			console.error('获取统计数据失败', error)
		}
	}
	//获取日期
	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		dateNow.value = `${year}`
		return `${year}-${month}-${day}`;
	}
	// 生成年份范围（例如最近10年）
	const yearRange = computed(() => {
		const currentYear = new Date().getFullYear()
		return Array.from({
			length: 10
		}, (_, i) => currentYear - i)
	})
	// console.log("orderAnalysis==setup", activeTabSon)
	onMounted(() => {
		getDate()
		getStatisticsOfTotalPrice(dateNow.value)
		// console.log("orderAnalysis==setup",props, activeTabSon)
	})
</script>

<style lang="scss" scoped>
	.total-analysis-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.state {
			margin-top: 4rpx;
			// height: 600rpx;
			// background: #FFFFFF;
			// box-shadow: 0px 4rpx 8rpx 0rpx rgba(224, 229, 237, 0.5);
			border-radius: 10rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left-title {
					height: 76rpx;
					margin-left: 46rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 76rpx;
				}

				.btn {
					margin-right: 30rpx;
					z-index: 9;

					::v-deep {
						.uv-subsection__item {
							flex: initial !important;
							/* 使用 !important 强制覆盖组件库的默认样式 */
							width: 70rpx;
							height: 34rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							text-align: center;
						}

						.uv-subsection__item--0 {
							.uv-subsection__item__text {
								width: 65rpx;
								border-right: 1px solid #cccccc;
							}
						}
					}
				}

			}

			.middle {
				position: relative;
				margin-top: 18rpx;

				.charts {
					width: 740rpx;
					height: 500rpx;
					margin-left: -140rpx;
					margin-top: -40rpx;

					::v-deep {
						.uni-canvas-canvas {
							top: -40rpx;
						}
					}

				}

				.total {
					position: absolute;
					top: 220rpx;
					left: 140rpx;
					text-align: center;

					.txt {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.num {
						font-size: 48rpx;
						font-family: DINAlternateBold;
						font-weight: bold;
						color: #333333;
					}
				}

				.state-list {
					position: absolute;
					right: 30rpx;
					top: 50rpx;
					width: 280rpx;
					max-height: 450rpx; // 设置最大高度
					overflow-y: auto; // 添加垂直滚动
					scroll-behavior: smooth;
					padding-right: 10rpx; // 为滚动条留空间

					// 隐藏滚动条（可选）
					// &::-webkit-scrollbar {
					// 	// display: none;
					// 	display: block;
					// 	width: 4rpx;
					// }
					.state-child {
						height: 40rpx;
						margin-bottom: 18rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left-title {
							display: flex;
							align-items: center;

							.iconfont {
								width: 12rpx;
								height: 12rpx;
								margin-right: 16rpx;
							}

							.txt {
								vertical-align: middle;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
							}
						}

						.num {
							margin-top: 6rpx;
							float: right;
							font-size: 32rpx;
							font-family: DINAlternateBold;
							font-weight: bold;
							color: #333333;
						}

					}
				}
			}
		}
	}
</style>